/* 获取元素 */
const hourEl = document.querySelector(".hour");
const minuteEl = document.querySelector(".minute");
const secondEl = document.querySelector(".second");
const timeEl = document.querySelector(".time");
const dateEl = document.querySelector(".date");
const toggle = document.querySelector(".toggle");

/* 初始化 */
const days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];
/* 点击事件 */
toggle.addEventListener("click", (e) => {
  /* 获取元素 */
  const html = document.querySelector("html");
  /* html元素身上是否存在dark类样式 */
  if (html.classList.contains("dark")) {
    /* 移除dark类样式 */
    html.classList.remove("dark");
    /* 更改当前元素的内容 */
    e.target.innerHTML = "Dark mode";
  } else {
    /* 添加dark类样式 */
    html.classList.add("dark");
    /*  更改当前元素的内容 */
    e.target.innerHTML = "Light mode";
  }
});

function setTime() {
  /* 获取时间 */
  const time = new Date();
  /* 根据本地时间，返回一个指定的日期对象的月份，为基于 0 的值（0 表示一年中的第一月）。 */
  const month = time.getMonth();
  /* getDay() 方法根据本地时间，返回一个具体日期中一周的第几天*/
  const day = time.getDay();
  /* 根据本地时间，返回一个指定的日期对象为一个月中的哪一日（从1--31） */
  const date = time.getDate();
  /* getHours() 方法根据本地时间，返回一个指定的日期对象的小时 */
  const hours = time.getHours();

  const hoursForClock = hours >= 13 ? hours % 12 : hours;
  /* getMinutes() 方法根据本地时间，返回一个指定的日期对象的分钟数。 */
  const minutes = time.getMinutes();
  /* getSeconds() 方法根据本地时间，返回一个指定的日期对象的秒数。 */
  const seconds = time.getSeconds();
  /* 白天还是晚上 */
  const ampm = hours >= 12 ? "PM" : "AM";
  /* 更改 hourEl元素样式*/
  hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(
    hoursForClock,
    0,
    12,
    0,
    360
  )}deg)`;
  /* 更改 hourEl元素样式*/
  minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(
    minutes,
    0,
    60,
    0,
    360
  )}deg)`;
  /* 更改 hourEl元素样式*/
  secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(
    seconds,
    0,
    60,
    0,
    360
  )}deg)`;
  /* 更改 timeEl元素内容 */
  timeEl.innerHTML = `${hoursForClock}:${
    minutes < 10 ? `0${minutes}` : minutes
  } ${ampm}`;
  dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`;
}

const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
};
setTime();
/* 定时器 */
setInterval(setTime, 1000);
